<template>
  <view class="page-container">
    <view v-if="!isLogin" class="no_login_wrap">
      <image src="../../../static/img/user/no_login.png" mode="aspectFill"></image>
      <h4>需要登录才可以使用该功能哦~</h4>
      <button @tap="jumpLogin">立即登录</button>
    </view>
    <view v-else class="logined_wrap">
      <view class="uni-panel">
        <view class="uni-panel-h">
          <text class="uni-panel-text" :class="panelSelected == 'like' ? 'uni-panel-h-on' : ''" @tap="triggerSelect('like')">我的赞</text>
          <text class="uni-panel-text" :class="panelSelected == 'reply' ? 'uni-panel-h-on' : ''" @tap="triggerSelect('reply')">我的回复</text>
        </view>
        <view class="uni-panel-c">
          <!-- 我的收藏列表 -->
          <view v-if="panelSelected == 'like'" class="c-like">
            <view class="uni-list" v-for="item in likeList" :key="item.content">
              <view class="uni-list-cell">
                <!-- <view class="uni-list-cell-left" v-bind:class="{'many-avatar':item.users.length>1}"> -->
                <view class="uni-list-cell-left">
                  <image class="icon-avatar" :src="item.avatar"></image>
                  <!-- <image class="icon-avatar" v-for="avatar in item.avatars" :key="avatar" :src="avatar"></image> -->
                </view>
                <view class="uni-list-cell-right">
                  <view class="user-name">
                    <text>{{item.account}}</text>赞了你评论
                  </view>
                  <view class="uni-comment-content">
                    {{item.comment}}
                  </view>
                  <view class="uni-comment-date">
                    {{item.date}}
                  </view>
                </view>
              </view>
            </view>
            <view v-if="likeList.length == 0" class="no-data">
              <image src="../../../static/img/user/no_like.png" mode="widthFix"></image>
              <view class="uni-h5">
                您暂未收到任何赞叹哦~
              </view>
            </view>
          </view>
          <!-- 我的回复列表  -->
          <view v-if="panelSelected == 'reply'" class="c-reply">
            <view class="uni-list" v-for="item in replyList" :key="item.content">
              <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                  <image class="icon-avatar" :src="item.avatar"></image>
                  <!-- <view class="icon-avatar"></view> -->
                </view>
                <view class="uni-list-cell-right">
                  <view class="user-name">
                    <text>{{item.account}}</text>回复了你评论
                  </view>
                  <view class="uni-comment-content">
                    {{item.value}}
                  </view>
                  <view class="uni-comment-date">
                    {{item.date}}
                  </view>
                </view>
              </view>
            </view>
            <view v-if="replyList.length == 0" class="no-data">
              <image src="../../../static/img/user/no_reply.png" mode="widthFix"></image>
              <view class="uni-h5">
                您暂未收到任何消息哦~
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getMyLike,
    getMyReply
  } from '@/utils/api';
  export default {
    name: 'MyMessage', // 我的消息
    data() {
      return {
        isLogin: false,

        panelSelected: 'like', // 我的赞-like、我的回复-reply
        // 我的赞
        likePage: 1,
        likeList: [],
        likeTotal: 0,
        // 我的回复
        replyPage: 1,
        replyList: [],
        replyTotal: 0
      }
    },
    onShow() {
      const auth_token = uni.getStorageSync("auth_token");
      this.likeList = [];
      this.replyList = [];
      if (auth_token) {
        this.isLogin = true;
        this.queryMylike();
      } else {
        this.isLogin = false
      }
    },
    onReachBottom() {
      if (this.panelSelected === 'like') {
        this.queryMylike(this.likePage)
      } else {
        if (this.replyList.length < this.replyTotal) {
          this.queryMyReply(this.replyPage)
        }
      }
    },
    methods: {
      // 跳转到登录页面
      jumpLogin() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      // 查询我的赞
      async queryMylike() {
        const params = {
          page: this.likePage,
          limit: 10
        }
        const res = await getMyLike(params);
        if (res.status === 0) {
          this.likePage++;
          this.likeList = this.likeList.concat(res.data.data || [])
          this.likeTotal = res.data.total;
        }
      },
      // 我的回复
      async queryMyReply() {
        const params = {
          page: this.replyPage,
          limit: 10
        }
        let res = await getMyReply(params);
        if (res.status === 0) {
          this.likePage++;
          this.replyList = this.replyList.concat(res.data.data || []);
          this.replyTotal = res.data.total;
        }
      },
      // 切换选中
      triggerSelect(selected) {
        this.panelSelected = selected;
        if (this.panelSelected === 'like' && this.likeList.length == 0) {
          this.queryMylike(this.likePage);
        }
        if (this.panelSelected === 'reply' && this.replyList.length == 0) {
          this.queryMyReply(this.replyPage);
        }
      }
    }
  }
</script>

<style>
  @import url("../../../static/style/no_login.css");

  page {
    height: 100%;
    padding-top: 1upx;
    border-top: 2upx solid #E3E3E3;
  }

  .page-container {
    /* height: 100%; */
    /* overflow: auto; */
  }

  .uni-panel-h {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40upx;
    margin-bottom: 20upx;
  }

  .uni-panel-h .uni-panel-text {
    text-align: center;
    color: #999;
    line-height: 36upx;
    font-size: 30upx;
  }

  .uni-panel-h .uni-panel-h-on {
    color: #333;
    font-size: 34upx;
    font-weight: bold;
    position: relative;
  }

  .uni-panel-h .uni-panel-h-on:after {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 6upx;
    background: #AD85FC;
    bottom: -16upx;
  }

  .uni-list-cell-left {
    width: 88upx;
    padding: 0;
    margin-right: 18upx;
    align-self: flex-start;
  }

  .icon-avatar {
    width: 88upx;
    height: 88upx;
    /* border: 1px solid #999; */
    border-radius: 50%;
  }

  .many-avatar .icon-avatar {
    width: 60upx;
    height: 60upx;
  }

  .many-avatar .icon-avatar+.icon-avatar {
    margin-top: -42upx;
    margin-left: 26upx;
  }

  .uni-panel-c {
    padding: 0 32upx;
  }

  .uni-panel-c .uni-list {
    padding: 40upx 0;
    font-size: 30upx;
  }

  .uni-panel-c .uni-list:before {
    display: none;
  }

  .uni-panel-c .uni-list:after {
    left: 106upx;
  }

  .user-name {
    color: #999;
    line-height: 36upx;
  }

  .user-name text {
    margin-right: 8upx;
  }

  .uni-comment-content {
    color: #333;
    line-height: 46upx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .uni-comment-date {
    font-size: 24upx;
    color: #999;
    line-height: 24upx;
  }



  /* 暂无数据 */
  .no-data {
    margin-top: 176upx;
    text-align: center;
  }

  .no-data image {
    width: 460upx;
  }

  .no-data .uni-h5 {
    color: #BBD5EF;
    margin-top: 36upx;
    font-size: 30upx;
    font-weight: 400;
  }
</style>
